<template>
  <div class="home">
    <div style="z-index: 999;width: 300px;height: 300px;background-color: rgb(243,243,243);padding-top: 30px;margin: 200px auto">
      <p style="text-align: center;font-size: 20px;font-weight: bold">万微港口微服务系统</p>
      <p style="text-align: center">后台登录</p>
      <div style="width: 240px;margin: 0 auto">
        <input type="text" class="cusInput"/>
        <input type="text" class="cusInput"/>
        <a class="btn" href="https://ntocc.56liaoning.com/views/send-template/platFormIndex.html#/main">登 陆</a>
      </div>
    </div>
    <span>•</span>
    <span>•••</span>
    <span>•••</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•••</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
    <span>•</span>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data(){
    return {
    }
  },
  methods: {
      btn(){
        document.onkeydown = function (e) {
            console.log(e);
            if (e.key == 'Enter') {
                console.log(1);
                window.location.href='https://ntocc.56liaoning.com/views/send-template/platFormIndex.html#/main';
            }
        }
      },
  },
  mounted() {
    // this.egao()
    // this.red()
    this.btn()
  }
}
</script>
<style>
  @-webkit-keyframes stars {
    50% {
      opacity: 1;
    }
    100% {
      transform: translate3d(0vmin, 0vmin, 1000vmin) scale(5);
      opacity: 0;
    }
  }
  html, body {
    width: 100%;
    height: 100%;
  }

  body {
    perspective: 200vmin;
    perspective-origin: 50% 50%;
    background: #000;
    overflow: hidden;
  }
  body span {
    width: .5vmin;
    height: .5vmin;
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate3d(0vmin, 0vmin, -5000vmin) scale(5);
    opacity: 0;
  }
  body span:nth-of-type(1) {
    box-shadow: 17vmin -10vmin 0 #fff , -4vmin -25vmin 0 #fff , -8vmin 36vmin 0 #fff , 40vmin 9vmin 0 #fff , 21vmin -25vmin 0 #fff;
    animation: stars 10s infinite linear;
  }
  body span:nth-of-type(2) {
    animation: stars 9s infinite linear 1s;
    box-shadow: 42vmin -20vmin 0 #fff , -45vmin -2vmin 0 #fff , 38vmin 50vmin 0 #fff , 5vmin 54vmin 0 #fff , -4vmin -41vmin 0 #fff , 29vmin 33vmin 0 #fff , -15vmin 40vmin 0 #fff;
  }
  body span:nth-of-type(3) {
    animation: stars 8s infinite linear 2s;
    box-shadow: -47vmin -29vmin 0 #fff , 9vmin 27vmin 0 #fff , -45vmin 41vmin 0 #fff , 1vmin 20vmin 0 #fff , 13vmin -11vmin 0 #fff , 37vmin -39vmin 0 #fff , -15vmin -30vmin 0 #fff , -9vmin 31vmin 0 #fff , 1vmin -11vmin 0 #fff , -39vmin -12vmin 0 #fff;
  }
  body span:nth-of-type(4) {
    animation: stars 7s infinite linear 3s;
    box-shadow: 17vmin -10vmin 0 #fff , -4vmin -25vmin 0 #fff , -8vmin 36vmin 0 #fff , 40vmin 9vmin 0 #fff , 21vmin -25vmin 0 #fff;
  }
  body span:nth-of-type(5) {
    animation: stars 6s infinite linear 4s;
    box-shadow: 42vmin -20vmin 0 #fff , -45vmin -2vmin 0 #fff , 38vmin 50vmin 0 #fff , 5vmin 54vmin 0 #fff , -4vmin -41vmin 0 #fff , 29vmin 33vmin 0 #fff , -15vmin 40vmin 0 #fff;
  }
  body span:nth-of-type(6) {
    animation: stars 5s infinite linear 5s;
    box-shadow: -47vmin -29vmin 0 #fff , 9vmin 27vmin 0 #fff , -45vmin 41vmin 0 #fff , 1vmin 20vmin 0 #fff , 13vmin -11vmin 0 #fff , 37vmin -39vmin 0 #fff , -15vmin -30vmin 0 #fff , -9vmin 31vmin 0 #fff , 1vmin -11vmin 0 #fff , -39vmin -12vmin 0 #fff;
  }
  body span:nth-of-type(7) {
    animation: stars 4s infinite linear 6s;
    box-shadow: 17vmin -10vmin 0 #fff , -4vmin -25vmin 0 #fff , -8vmin 36vmin 0 #fff , 40vmin 9vmin 0 #fff , 21vmin -25vmin 0 #fff;
  }
  body span:nth-of-type(8) {
    animation: stars 3s infinite linear 7s;
    box-shadow: -47vmin -29vmin 0 #fff , 9vmin 27vmin 0 #fff , -45vmin 41vmin 0 #fff , 1vmin 20vmin 0 #fff , 13vmin -11vmin 0 #fff , 37vmin -39vmin 0 #fff , -15vmin -30vmin 0 #fff , -9vmin 31vmin 0 #fff , 1vmin -11vmin 0 #fff , -39vmin -12vmin 0 #fff;
  }
  body span:nth-of-type(9) {
    animation: stars 2s infinite linear 8s;
    box-shadow: 42vmin -20vmin 0 #fff , -45vmin -2vmin 0 #fff , 38vmin 50vmin 0 #fff , 5vmin 54vmin 0 #fff , -4vmin -41vmin 0 #fff , 29vmin 33vmin 0 #fff , -15vmin 40vmin 0 #fff;
  }
  body span:nth-of-type(10) {
    animation: stars 1s infinite linear 9s;
    box-shadow: 17vmin -10vmin 0 #fff , -4vmin -25vmin 0 #fff , -8vmin 36vmin 0 #fff , 40vmin 9vmin 0 #fff , 21vmin -25vmin 0 #fff;
  }

  .cusInput{
    display: block;
    width: 100%;
    height: 26px;
    margin-bottom: 14px;
    border: none;
    border-radius: 4px;
    padding-left: 20px;
    box-sizing: border-box;
  }
  .btn{
    text-decoration: none;
    display: block;
    text-align: center;
    line-height: 30px;
    width: 100%;
    border: none;
    height: 30px;
    background-color: rgb(21,166,137);
    color: white;
    border-radius: 4px;
    cursor: pointer;
  }
</style>
